// @代码风格:能横写的代码都写在一行，实在太长不易阅读的才换行，
//          缩进使用tab.
//          不可以使用id作用于样式，id全部留给js使用，js中如需要使用class操作多个节点，js使用的样式以j-开头，
//          样式顺序遵循 先布局后自我样式顺序,
//          e.g (margin position left...)—>(padding...)—>(border...)—>(width height...)—>(background...)...,
//          css3各浏览器前缀竖写，遵循CFOS (C:chrome/safari)(F:firefox)(O:opera)(S:microsoft ie)顺序.
//          zindex管理：
//          局部浮动元素：10-20八
//          整体浮动元素：20-30
//          全局弹出框  ：30-40
// @命名规范：全站通用的样式都以f-命名开头，取fucntion之义，
//           不可重复使用以防止污染其它样式的css，以i-开头 ，取id之义
//           每个模板页面的body处需加一个n-开头的命名的class，如n-index，取namespace之义，本页独有样式都需要以其为祖先来继承.

////////////////////////////////////////////////////////
// @名称： function.less
// @作者： 耗子
// @功能： 用于解决浏览器各种兼容问题

// 清除浮动造成的影响
.f-clearfix(){
  *zoom:1;
  &:after{
    visibility: hidden;display: block;font-size: 0;content: ".";clear: both;height: 0;
  }
}
//块状元素inline-block(内联元素ie67原生支持inline-block)
.f-inlineBlock(){
    display: inline-block;
   *display: inline;
   *zoom:1;
}

//去除浮动可能造成的双倍边距（其实只在有margin时ie6才会有bug）
.f-fl(){
  float:left;
  _display: inline;
}
.f-fr(){
  float:right;
  _display:inline;
}
// 清除inline-block元素代码换行造成的空隙
.f-ib() {font-size:0;
  & * {font-size:12px;}
}
//单行文字超出省略号
.f-textOverflow() {
  overflow: hidden;
     text-overflow: ellipsis;
  //-o-text-overflow: ellipsis;
  white-space: nowrap;
}
// 超长英文自动换行
.f-wordBreak(){
  word-wrap:break-word;
  word-break:break-all;
}
// 常用描边
.f-border(@color, @width:1px, @type:solid){
    border:@width @type @color;
}

//定义矩形
.f-size(@width,@height){
    width:@width;
    height:@height;
}

//定义正方形
.f-square(@width){
    .f-size(@width,@width);
}

//居中容器
.f-centerBox(@width:@maxWidth){
  width:@width;
  margin:0 auto;
}

//hack ie6
.f-minWidth(@width){
    min-width:@width;
       _width : ~"expression((documentElement.clientWidth<@{width})?'@{width}':'auto')";
}

//min height 只有min-height性能消耗小，你们懂的
.f-minHeight(@height){
    min-height:@height;
       _height:@height;
}

//max width
.f-maxWidth(@width){
    max-width : @width;
       _width : ~"expression((documentElement.clientWidth>@{width})?'@{width}':'auto')";

}

//max height
.f-maxHeight(@height){
     max-height : @height;
       _height : ~"expression((documentElement.clientHeight>@{height})?'@{height}':'auto')";
}

//fixed 顶部静止 必须为body设置_background:url(about:blank);或图片
.f-fixed(){
    position: fixed;
   _position:absolute;
}

//顶部静止
.f-fixedTop(@top : 0){
    position: fixed;
   _position: absolute;
    top:@top;
   _top:~"expression(eval(document.documentElement.scrollTop + @{top}))";
}

//底部静止  性能比顶部静止更差 ╮(╯▽╰)╭
.f-fixedBottom(@bottom : 0){
    position: fixed;
   _position:absolute;
    bottom:@bottom;
   _top:~"expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)) - @{bottom})";
}

// css3属性处理 
// opacity 透明处理
.f-opacity(@opacity: 1) {
    @_opacity :@opacity*100;
    filter: ~"alpha(opacity=@{_opacity})";
    opacity: @opacity;  
}
// @说明： 由于编译版的less的js能力太弱，无法由一套数据进行换算，只能 rgba 16进制色彩、百分制通道分别预设
// @demo： .f-backgroundOpacity(255,255,255,0.8,"ffffff","cc")
//      cc = Math.floor(0.8 * 255).toString(16)
.f-backgroundOpacity(@r:255, @g:255, @b:255, @a:1, @color:"ffffff", @opacity : "ff"){
    background-color:rgba(@r,@g,@b,@a);
    filter:~"progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#@{opacity}@{color}', EndColorStr='#@{opacity}@{color}')";
    :root &{filter:none;}
}
.f-backgroundGradient(@start, @end){
  filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='@{start}', endColorstr='@{end}')";
  background: -moz-linear-gradient(top, @start, @end); 
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(@start), to(@end)); 
  background: linear-gradient(top, @start, @end); 
}
//border-radius 圆角
.f-borderRadius(@radius: "5px") {
    -webkit-border-radius: ~"@{radius}";
       -moz-border-radius: ~"@{radius}";
            border-radius: ~"@{radius}";
}

// box-shadow
.f-boxShadow(@shadow: "0 1px 3px rgba(0,0,0,.25)") {
    -webkit-box-shadow: ~"@{shadow}";
       -moz-box-shadow: ~"@{shadow}";
            box-shadow: ~"@{shadow}";
}

// transitions
.f-transition(@transition) {
    -webkit-transition: ~"@{transition}";
       -moz-transition: ~"@{transition}";
        -ms-transition: ~"@{transition}";
         -o-transition: ~"@{transition}";
            transition: ~"@{transition}";
}

// transformations
.f-rotate(@degrees) {
    -webkit-transform: rotate(@degrees);
       -moz-transform: rotate(@degrees);
        -ms-transform: rotate(@degrees);
         -o-transform: rotate(@degrees);
            transform: rotate(@degrees);
}
.f-scale(@ratio) {
    -webkit-transform: scale(@ratio);
       -moz-transform: scale(@ratio);
        -ms-transform: scale(@ratio);
         -o-transform: scale(@ratio);
            transform: scale(@ratio);
}
.f-translate(@x: 0, @y: 0) {
    -webkit-transform: translate(@x, @y);
       -moz-transform: translate(@x, @y);
        -ms-transform: translate(@x, @y);
         -o-transform: translate(@x, @y);
            transform: translate(@x, @y);
}
.f-skew(@x: 0, @y: 0) {
    -webkit-transform: skew(@x, @y);
       -moz-transform: skew(@x, @y);
        -ms-transform: skew(@x, @y);
         -o-transform: skew(@x, @y);
            transform: skew(@x, @y);
}
.f-translate3d(@x: 0, @y: 0, @z: 0) {
    -webkit-transform: translate(@x, @y, @z);
       -moz-transform: translate(@x, @y, @z);
        -ms-transform: translate(@x, @y, @z);
         -o-transform: translate(@x, @y, @z);
            transform: translate(@x, @y, @z);
}

// background clip
.f-backgroundClip(@clip) {
    -webkit-background-clip: @clip;
       -moz-background-clip: @clip;
            background-clip: @clip;
}

// background size
.f-backgroundSize(@size){
    -webkit-background-size: @size;
       -moz-background-size: @size;
         -o-background-size: @size;
            background-size: @size;
}


// box sizing
.f-boxSizing(@boxmodel) {
    -webkit-box-sizing: @boxmodel;
       -moz-box-sizing: @boxmodel;
        -ms-box-sizing: @boxmodel;
            box-sizing: @boxmodel;
}

// user select
.f-userSelect(@select) {
    -webkit-user-select: @select;
       -moz-user-select: @select;
         -o-user-select: @select;
            user-select: @select;
}

// resize anything
.f-resizable(@direction: both) {
    resize: @direction; // Options: horizontal, vertical, both
    overflow: auto;
}

// content Columns
.f-contentColumns(@columnCount, @columnGap: @gridColumnGutter) {
    -webkit-column-count: @columnCount;
       -moz-column-count: @columnCount;
            column-count: @columnCount;
      -webkit-column-gap: @columnGap;
         -moz-column-gap: @columnGap;
              column-gap: @columnGap;
}

//animation
.f-animation(@param){
    -webkit-animation: ~"@{param}";
       -moz-animation: ~"@{param}";
        -ms-animation: ~"@{param}";
         -o-animation: ~"@{param}";
            animation: ~"@{param}";
}
//debug
.f-debug(@color:#f00){
    .f-border(@color);
}


// @名称： config.less;
// @作者： 耗子
// @功能： 项目配置文件，不输出css

// 全局变量
// 色值
@baseColor:#333;      //默认颜色值

@black:#333;      //黑
@white:#fff;      //白

@grayLight:#F5F5F5;   //浅灰
@gray:#999;         //灰
@grayDark:#999;     //深灰

@redLight:#c00;     //浅红
@red:#c00;          //红
@redDark:#c00;      //深红

@pinkLight:#c3325f;   //浅粉
@pink:#c3325f;        //粉
@pinkDark:#c3325f;    //深粉

@orangeLight:#f89406; //浅橙
@orange:#f89406;    //橙
@orangeDark:#f89406;  //深橙

@yellowLight:#F5EBCB; //浅黄
@yellow:#ffc40d;    //黄
@yellowDark:#f7e2bb;  //深黄

@greenLight:#46a546;  //浅绿 
@green:#46a546;       //绿
@greenDark:#46a546;   //深绿

@blueLight:#C8D1E2;   //浅蓝
@blue:#3B59A6;        //蓝
@blueDark:#3B5998;    //深蓝

@brownLight:#d3b57f;  //浅棕
@brown:#d3b57f;       //棕色文字
@brownDark:#623319;   //深棕

@purple:#7a43b6;    //浅紫
@purple:#7a43b6;    //紫
@purple:#7a43b6;    //深紫


//链接
@linkColor:#2A7CA2;          //默认链接颜色值
@linkColorHover:#2A7CA2;     //默认hover链接色
@baseFontSize:12px;       //默认字体大小
@baseLineHeight:1.5em;    //默认行高


//字体
@baseFontFamily:'tahoma,arial,helvetica,"\5fae\8f6f\96c5\9ed1","\5b8b\4f53",sans-serif'; //默认字体
@bigTitleFontFamily: '"\5fae\8f6f\96c5\9ed1","\9ed1\4f53"';//黑体


//栅格化
@maxWidth : 960px;
@girdNum : 24;
@gridWidth : @maxWidth / @girdNum;


//环境变量
@version:'1.0';  //版本控制，所有图片等资源后带 ?v=@{version}
@lastCompileTime:`new Date().valueOf()`;//上次编译时间
@imgDir :'../images';//默认图片路径